<template>
	<view>
		<view class="warp">
			<view class="top">
				<view class="img">
					<!-- <image src="../../static/image/zhifu.png" mode=""></image> -->
				</view>
				<view class="title">
					<text>{{list.billTitle}}</text>
				</view>
				<view class="allmoney">
					<text>总费用(元):</text>
					<text class="red">￥{{list.payBillAmount}}</text>
				</view>
			</view>
			<view class="zhixian"></view>

			<view class="bottom">
				<view class="dd">
					<view class="left">
						<text>消费全称  :</text>
					</view>
					<view class="right">
						<text>{{list.billTitle}}</text>
					</view>
				</view>
				<view class="dd">
					<view class="left">
						<text>消费全称  :</text>
					</view>
					<view class="right">
						<text>{{list.billStatusText}}</text>
					</view>
				</view>
				<!-- <view class="left">
					<view class="item">
						<text>消费全称</text>
					</view>
					<view class="item">
						<text>当前状态</text>
					</view>
				</view> -->
				<!-- <view class="right">
					<view class="item">
						<text>{{list.billTitle}}</text>
					</view>
					<view class="item">
						<text>{{list.billStatusText}}</text>
					</view>
				</view> -->
			</view>

			<view class="info" v-for="(item,index) in listInfo" :key="index">
				<view class="left">
					<view class="item">
						<text>{{item.costName}}  :</text>
					</view>
				</view>
				<view class="right">
					<view class="item">
						<text>￥{{item.cost}}</text>
					</view>
				</view>
			</view>
			<view class="time">
				<text>时间：{{list.payDeadline}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				listInfo: [],
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.billId
			console.log(this.id)
			this.getBillInfo()
		},
		methods: {
			async getBillInfo() { //读取客户信息
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-cost/bill/' + this.id,
					})
				console.log(res.msg)
				this.list = res.body.costBill
				console.log("billList", this.list)
				this.listInfo = res.body.costBill.details
				console.log("billList", this.listInfo)
			},
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style>
	/* page {
		background-color: #FFFFFF;
	} */

	.warp {
		margin-top: 5%;
		margin-left: 2%;
		margin-right: 2%;
		/* margin-left:2%; */
		width: 97%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url(../../static/image/shapeCombination@2x.png);
		background-size: 100% 100%;
	}

	.top {
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		padding-top: 40rpx;
	}

	.img image {
		width: 90rpx;
		height: 90rpx;
	}

	.title {
		margin-top: 24rpx;
		font-size: 42rpx;
		/* font-weight: bold; */
		color: #109ef8;
		text-align: center;
	}

	.allmoney {
		margin-top: 24rpx;
		font-size: 28rpx;
		/* font-weight: bold; */
		padding-bottom: 40rpx;
	}

	.red {
		font-size: 52rpx;
		color: #ff0000;
		font-weight: bold;
	}

	.zhixian {
		width: 90%;
		height: 1px;
		border-top: solid #bdbdbd 2px;
	}

	.bottom {
		/* border: 1rpx solid; */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		/* border: 1rpx solid; */
		align-items: center;
		justify-content: center;
	}

	.left {
		width: 50%;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		/* font-weight: bold; */
		color: #000000;
		margin-left: 9%;
		/* border: 1rpx solid; */
	}

	.item {
		margin-bottom: 20rpx;
	}

	.right {
		/* border: 1rpx solid; */
		width: 65%;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		color: #959595;
		/* font-weight: bold; */
	}

	.info {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* border: 1rpx solid; */
		align-items: center;
		justify-content: center;
	}

	.time {
		font-size: 36rpx;
		/* font-weight: bold; */
		color: #109ef8;
		/* border: 1rpx solid; */
		margin-top: 60rpx;
		text-align: center;
		height: 160rpx;
	}

	.dd {
		margin-bottom: 10rpx;
		/* border: 1rpx solid; */
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
</style>
